<template>
  <div class="container">
    <div class="title">
      <img :src="base_url+'/mp_3.0/icon_phone.png'"
           v-if="base_url"
           alt=""
           class="img-icon">
      当前绑定手机号为
    </div>
    <div class="title-2">
      {{user_tel}}
    </div>
    <div class="btn-bar">
      <div class="login-btn"
           @click="bind_tel()">
        确认登录
      </div>
      <button open-type="getPhoneNumber"
              class="back-btn"
              @getphonenumber="get_tel">
        使用其他手机登录
      </button>
    </div>
  </div>

</template>

<script>
import common from '@/assets/js/mmk_common.js'
export default {
  data () {
    return {
      base_url: common.image_resource,
      user_tel: "",
      real_tel: "",
      user_jwt: "",
      source: ""
    };
  },
  methods: {
    comfirm () {
      wx.navigateBack({
        delta: 1 //返回的页面数，如果 delta 大于现有页面数，则返回到首页,
      });
    },
    get_tel (e) {
      console.log(e);
      let that = this
      if (e.mp.detail.errMsg == "getPhoneNumber:ok") {
        wx.showLoading({
          title: '', //提示的内容,
          mask: true, //显示透明蒙层，防止触摸穿透,
          success: res => { }
        });
        //同意获取手机号
        wx.login({
          success: result => {
            common.fly_post("api/v4_2/minapp/bind_mobile", {
              iv: e.mp.detail.iv,
              code: result.code,
              encryptedData: e.mp.detail.encryptedData,
              status: 1,
              source: this.source,
              user_jwt: this.user_jwt
            }, response => {
              let res = response.data;
              wx.hideLoading();
              if (res.status_code == 0) {
                wx.setStorageSync("user_token", res.data.token);
                wx.setStorageSync("user_id", res.data.user_id);
                wx.setStorageSync("role_id", res.data.user.data.role_id);
                wx.setStorageSync("account_type", res.data.user.data.account_type);
                wx.showToast({
                  title: '登录成功', //提示的内容,
                  icon: 'success', //图标,
                  duration: 1500, //延迟时间,
                  mask: true, //显示透明蒙层，防止触摸穿透,
                  success: res => { }
                });
                that.bind_user()
                //   绑定成功  返回到上一级
                setTimeout(() => {
                  wx.navigateBack({
                    delta: 1 //返回的页面数，如果 delta 大于现有页面数，则返回到首页,
                  });
                }, 1500);

              } else {
                wx.showToast({
                  title: res.message, //提示的内容,
                  icon: "none", //图标,
                  duration: 1500, //延迟时间,
                  mask: false //显示透明蒙层，防止触摸穿透,
                });
              }
            });
          }
        });
      }
    },
    bind_tel () {
      let that = this
      wx.showLoading({
        title: '', //提示的内容,
        mask: true, //显示透明蒙层，防止触摸穿透,
        success: res => { }
      });
      let s_data = wx.getStorageSync('s_data')
      common.fly_post("api/v4_2/minapp/bind_mobile", {
        status: 2,
        phone: this.real_tel,
        source: this.source,
        user_jwt: this.user_jwt
      }, response => {
        let res = response.data;
        wx.hideLoading();
        if (res.status_code == 0) {
          wx.setStorageSync("user_token", res.data.token);
          wx.setStorageSync("user_id", res.data.user_id);
          wx.setStorageSync("is_plus", res.data.user.data.is_plus);
          wx.setStorageSync("is_home_plus_entrance", res.data.user.data.is_home_plus_entrance);
          wx.setStorageSync("account_type", res.data.user.data.account_type);
          wx.setStorageSync("role_id", res.data.user.data.role_id);
          that.bind_user()
          wx.showToast({
            title: '登录成功', //提示的内容,
            icon: 'success', //图标,
            duration: 1500, //延迟时间,
            mask: true, //显示透明蒙层，防止触摸穿透,
            success: res => { }
          });
          wx.getStorage({
            key: 'jump_url',
            success: (result) => {
              console.log(result.data)
              if (s_data.t == 13) {
                wx.reLaunch({ url: (result.data + '&share_id=' + s_data.sid) });
                console.log(result.data + '&share_id=' + s_data.sid);
              } else {
                wx.reLaunch({ url: result.data });
              }
              // wx.redirectTo({ url: result.data });
              wx.removeStorage({
                key: 'jump_url',
                success: res => { }
              });
            },
            fail: () => {
              //   绑定成功  返回到上一级
              setTimeout(() => {
                wx.navigateBack({
                  delta: 2 //返回的页面数，如果 delta 大于现有页面数，则返回到首页,
                });
              }, 1500);
            },
            complete: () => { }
          })
        } else {
          wx.showToast({
            title: res.message, //提示的内容,
            icon: "none", //图标,
            duration: 1500, //延迟时间,
            mask: false //显示透明蒙层，防止触摸穿透,
          });
        }
      });
    },
    bind_user () {
      let that = this
      if (wx.getStorageSync('s_data')) {
        let s_data = wx.getStorageSync('s_data')
        common.fly_post(
          "api/v4_2/user/share",
          {
            type: s_data.t,
            sid: s_data.sid,
            d: s_data.d
          },
          response => {
            wx.navigateBack({
              delta: 1 //返回的页面数，如果 delta 大于现有页面数，则返回到首页,
            });
          }
        );
      }

    },
  },
  onLoad (options) {
    wx.setNavigationBarTitle({
      title: "美美咖"
    });
    wx.setNavigationBarColor({
      frontColor: '#000000', //前景颜色值，包括按钮、标题、状态栏的颜色，仅支持 #ffffff 和 #000000,
      backgroundColor: '#FFFFFF', //背景颜色值，有效值为十六进制颜色,
      success: res => { }
    });
    if (options.user_jwt||options.source) {
      this.real_tel = options.tel
      this.user_tel =
        this.real_tel.substr(0, 3) +
        "****" +
        this.real_tel.substr(7);
      this.user_jwt = options.user_jwt
      this.source = options.source
    }
  },
  onShow () {
  }
};
</script>

<style lang="less" scoped>
.container {
  .title {
    font-size: 16px;
    font-family: "PingFangSC-Medium", "PingFangSC";
    font-weight: 500;
    color: rgba(51, 51, 51, 1);
    line-height: 20px;
    margin-top: 50px;
    text-align: center;
    .img-icon {
      width: 12px;
      height: 17px;
      display: inline-block;
      vertical-align: middle;
    }
  }
  .title-2 {
    font-size: 36px;
    font-family: "PingFangSC-Semibold", "PingFangSC";
    font-weight: 600;
    color: rgba(255, 56, 62, 1);
    line-height: 44px;
    text-align: center;
    margin-top: 22px;
  }
  .btn-bar {
    position: absolute;
    bottom: 50px;
    left: 50%;
    transform: translateX(-50%);
    .login-btn {
      width: 255px;
      height: 50px;
      background: linear-gradient(
        45deg,
        rgba(228, 0, 98, 1) 0%,
        rgba(240, 139, 56, 1) 89%
      );
      box-shadow: 0px 2px 10px 0px rgba(234, 72, 76, 1);
      border-radius: 8px;
      font-size: 18px;
      font-family: "PingFangSC-Medium", "PingFangSC";
      font-weight: 500;
      color: rgba(255, 255, 255, 1);
      line-height: 50px;
      text-align: center;
    }
    .back-btn {
      width: 255px;
      height: 50px;
      background: rgba(2, 187, 0, 0.1);
      border-radius: 5px;
      font-size: 18px;
      font-family: "PingFangSC-Regular", "PingFangSC";
      font-weight: 400;
      color: #02bb00;
      line-height: 50px;
      text-align: center;
      margin-top: 20px;
    }
  }
}
</style>
